<template>
  <div class="" :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="arcgis-map" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
    <el-select v-model="type" placeholder="请选择" class="darw-type" @change="typeChange" style="width: 100px;">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
require('cesium/Source/Widgets/widgets.css');
import Cesium from 'cesium/Source/Cesium';
window.Cesium = Cesium;
import OLCesium from 'ol-cesium/src/olcs/OLCesium.js';

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Tile as TileLayer, Image as ImageLayer } from 'ol/layer'
import { OSM, ImageArcGISRest } from 'ol/source'
import olSourceImageWMS from 'ol/source/ImageWMS.js';
import { transform } from 'ol/proj'
import TileGrid from 'ol/tilegrid/TileGrid'
import TileImage from 'ol/source/TileImage'

import XYZSource from 'ol/source/XYZ'
// const url = '//10.1.3.42:6080/arcgis/rest/services/test/MapServer'
const url = 'http://10.1.3.42:6080/arcgis/rest/services/testserver/MapServer'

const layers = [
  new TileLayer({
    source: new OSM()
  }),
  // new ImageLayer({
  //   source: new ImageArcGISRest({
  //     ratio: 1,
  //     params: {},
  //     url: url
  //   })
  // })
  // new Cesium.ArcGisMapServerImageryProvider({
  //   url : url
  // })
]

export default {
  name: "ca",
  title: "3D ArcGIS",
  data () {
    return {
      map: null,
      ol3d: {},
      type: '3D',
      options: [
        {label: '显示2D', value: '2D'},
        {label: '显示3D', value: '3D'},
      ],
    }
  },
  mounted () {
    this.map = new Map({
      target: 'arcgis-map',
      layers: layers,
      view: new View({
        center: [106.51, 29.55],
        projection: 'EPSG:4326',
        zoom: 5
      })
    })
    this.ol3d = new OLCesium({
      map: this.map
    })
    console.log('1111', this.ol3d);
    // let scene = this.ol3d.getCesiumScene();
    let esri = new Cesium.ArcGisMapServerImageryProvider({
      url : url
    });
    // scene.terrainProvider = esri;
    this.ol3d.setEnabled(true)
  },
  methods: {
    typeChange (type) {
      if (type === '2D') {
        this.ol3d.setEnabled(false)
      } else {
        this.ol3d.setEnabled(true)
      }
    }
  }
}
</script>
<style lang="scss">
  .darw-type {
    position: absolute;
    top: 3rem;
    right: 1rem;
  }
</style>
